<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标签切换页</title>
<style>
	*{ margin:0; padding:0; }
	li{ list-style:none; }
	.clear:after{ content:""; display:block; clear:both; }
	#main{ width:310px; margin:10px; }
	#list{ border-left:1px #cfcfcf solid; 
		border-top:2px #206f96 solid; }
	#list li{ float:left; width:102px; height:29px; 
		border-right:1px #cfcfcf solid; line-height:29px; 
		text-align:center; background:#CCC repeat-x; }
	#list .active{ background:#ffffff; }
	#content{ height:100px; border:1px #cfcfcf solid; 
		padding:30px 10px;  }
	#content div{ display:none; }
	#content .show{ display:block; } 
</style>
</head>
<body>
<div id="main">
	<ul id="list" class="clear">
    	<li class="active">娱乐</li>
        <li>电影</li>
        <li>音乐</li>
    </ul>
    <div id="content">
    	<div class="show">板块一的内容</div>
        <div>板块二的内容</div>
        <div>板块三的内容</div>
    </div>
</div>
</body>
</html>
